<template>
  <div class="root">
    <div class="left-pane">
      <div style="display: inline-flex; gap: 8px;">
        <ElSelect v-model="curField" placeholder="请选择字段">
          <template v-for="(item, index) in optCols" :key="index">
            <ElOption :label="item.label" :value="item.value" />
          </template>
        </ElSelect>

        <ElButton type="primary"> 新增条件</ElButton>
      </div>

      <div class="card-list" v-if="selectedCol?.constraints?.length">
        <div v-for="(item, index) in selectedCol.constraints" :key="index" class="constraint-card"
          :class="{ active: curConstraint === item.conditionName }" @click="curConstraint = item.conditionName">
          <div class="card-head">
            <span>条件{{ index + 1 }}:</span>
            <ElText class="cond-name" type="info">{{ item.conditionName }}</ElText>

            <span class="sample-box" :style="boxStyle(item.style)">例</span>
          </div>

          <div class="card-body">
            <div class="cond-line">
              <span class="label">当值:</span>
              <ElText class="cond-type" type="info">&lt; {{ cvtConstraints(item.condition) }} &gt;</ElText>
              <ElText class="cond-val" type="success">"{{ item.conditionVal }}"</ElText>
            </div>
          </div>

          <div class="card-actions">
            <ElButton type="primary" text @click.stop="curConstraint = item.conditionName">编辑</ElButton>
            <ElButton type="danger" text @click.stop="removeConstraint(index)">删除</ElButton>
          </div>
        </div>
      </div>

      <div v-else class="empty-tip">该字段暂无条件</div>
    </div>

    <div class="right-pane">
      <template v-if="curField && curConstraint && selectedConstraint">
        <ElDivider content-position="left">条件</ElDivider>
        <div class="form-row">
          <ElText class="cond-label">当值:</ElText>
          <ElSelect v-model="selectedConstraint.condition" class="small-select">
            <template v-for="(item, index) in optConstraints" :key="index">
              <ElOption :label="item.label" :value="item.value" />
            </template>
          </ElSelect>

          <ElInput v-model="selectedConstraint.conditionVal" class="small-select">
          </ElInput>
        </div>

        <ElDivider content-position="left">样式设置</ElDivider>
        <div class="form-row">
          <ElText class="cond-label">背景色:</ElText>
          <ElColorPicker v-model="selectedConstraint.style.backgroundColor" />
          <ElText class="cond-label">字体色:</ElText>
          <ElColorPicker v-model="selectedConstraint.style.color" />


          <ElText class="cond-label">字体大小:</ElText>
          <ElInput v-model="selectedConstraint.style.fontSize" placeholder="例如：14px" class="small-select" />

          <ElText class="cond-label">字体样式:</ElText>
          <ElSelect v-model="selectedConstraint.style.fontStyle" class="small-select">
            <template v-for="(item, index) in optFS" :key="index">
              <ElOption :label="item.label" :value="item.value" />
            </template>
          </ElSelect>

          <ElText class="cond-label">字体粗细:</ElText>
          <ElSelect v-model="selectedConstraint.style.fontWeight" class="small-select">
            <template v-for="(item, index) in optFW" :key="index">
              <ElOption :label="item.label" :value="item.value" />
            </template>
          </ElSelect>
        </div>
      </template>

      <template v-else>
        请选择左侧条件
      </template>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, computed, type CSSProperties } from 'vue'

const props = defineProps<{
  cellStyles: {
    colField: string,
    constraints: {
      conditionName: string,
      condition: string,
      conditionVal: string,
      style: {
        backgroundColor: string,
        color: string,
        fontStyle: string,
        fontSize: string,
        fontWeight: string
      }
    }[]
  }[]
}>();

const curField = ref('drug_state');
const curConstraint = ref('');

const selectedCol = computed(() => props.cellStyles.find(m => m.colField == curField.value));
const selectedConstraint = computed(() => selectedCol.value?.constraints?.find(m => m.conditionName == curConstraint.value));

const optCols = [
  { label: '药品名称', value: 'drug_name' },
  { label: '药品规格', value: 'drug_spec' },
  { label: '生产厂商', value: 'factory' },
  { label: '库存位置', value: 'storage' },
  { label: '药品编码', value: 'drug_code' },
  { label: '药品状态', value: 'drug_state' },
]

const optConstraints = [
  { label: '等于', value: '==' },
  { label: '包含', value: '()' },
  { label: '不等于', value: '!=' },
  { label: '不包含', value: '!()' },
  { label: '为空', value: '=null' },
  { label: '不为空', value: '!=null' },
]
const cvtConstraints = (val: string) => {
  switch (val) {
    case '==':
      return '等于'
    case '()':
      return '包含'
    case '!=':
      return '不等于'
    case '!()':
      return '不包含'
    case '=null':
      return '为空'
    case '!=null':
      return '不为空'
    default:
      return ''
  }
}

const optFS = [
  { label: '正常', value: 'normal' },
  { label: '斜体', value: 'italic' },
]

const optFW = [
  { label: '正常', value: 'normal' },
  { label: '粗体', value: 'bold' },
  { label: '更粗', value: 'bolder' },
  { label: '最粗', value: '900' },
]

function removeConstraint(idx: number) {
  selectedCol.value?.constraints?.splice(idx, 1)
}

// 将 style 映射为 CSS 变量，减少多个内联样式属性
const boxStyle = (s: CSSProperties) => ({
  '--bg': s?.backgroundColor || 'transparent',
  '--fg': s?.color || '#333',
  '--fs': s?.fontSize || '12px',
  '--fw': s?.fontWeight || 'normal',
  '--fst': s?.fontStyle || 'normal'
})
</script>

<style scoped>
.root {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* 左侧：字段选择 + 横向卡片列表 */
.left-pane {
  width: 560px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 卡片横向滚动区域 */
.card-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  align-items: flex-start;
}

/* 单个条件卡片 */
.constraint-card {
  margin-top: 3px;
  width: 300px;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .15s ease, transform .12s ease;
}

.constraint-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 60, 120, 0.06);
}

.constraint-card.active {
  border-color: #409eff;
}

/* 卡片内部布局 */
.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #606266;
  justify-content: space-between;
  border-bottom: 1px solid #e6e9ef;
  padding-bottom: 2px;
}

.card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cond-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.cond-label {
  color: #909399;
  font-size: 12px;
}

.cond-type {
  width: 80px;
  display: inline-block;
}

.cond-val {
  min-width: 60px;
}

/* 示例样式：使用 CSS 变量，减少内联属性 */
.sample-box {
  display: inline-block;
  width: 34px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs);
  font-weight: var(--fw);
  font-style: var(--fst);
}

/* 卡片底部动作 */
.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 右侧编辑面板 */
.right-pane {
  flex: 1;
  min-width: 360px;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 6px;
  padding: 12px;
  box-sizing: border-box;
}

/* 表单行通用 */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.label {
  width: 40px;
}

/* 小尺寸 select/input */
.small-select {
  width: 140px;
}

.flex-1 {
  min-width: 20px;
}

.empty-tip {
  color: #909399;
  padding: 12px 8px;
}
</style>
